<template>
  <a-modal
    v-model:visible="visible"
    :footer="null"
    :closable="false"
    :mask-closable="false"
    width="800px"
    style="top:30px"
  >
    <div class="welcome-guide">
      <!-- 头部标题 -->
      <div class="guide-header">
        <div class="logo-section">
          <div class="logo-placeholder fade-in">AI</div>
          <h1 class="title fade-in-delay">面试通-基于多模态分析的智能面试评测系统</h1>
        </div>
        <p class="subtitle fade-in-delay">您的专属职场助手，智能面试全程陪伴</p>
      </div>

      <!-- 内容区域 -->
      <div class="guide-content">
        <div v-if="currentStep === 'main'" class="main-options">
          <h2 class="section-title">欢迎使用 <span class="highlight">面试通</span></h2>
          <p class="section-desc">
            我们提供多种功能帮助您备战面试，提高竞争力，快速获得理想工作机会
          </p>

          <div class="options-grid">
            <div class="option-card" @click="setStep('full-process')">
              <div class="option-icon">
                <field-time-outlined />
              </div>
              <div class="option-content">
                <h3>全流程面试</h3>
                <p>从笔试到面试，完整体验企业招聘全流程</p>
              </div>
              <right-circle-outlined class="arrow-icon" />
            </div>

            <div class="option-card" @click="setStep('modular')">
              <div class="option-icon">
                <appstore-outlined />
              </div>
              <div class="option-content">
                <h3>模块化训练</h3>
                <p>针对性练习笔试、技术面、HR面各个环节</p>
              </div>
              <right-circle-outlined class="arrow-icon" />
            </div>

            <div class="option-card" @click="setStep('community')">
              <div class="option-icon">
                <team-outlined />
              </div>
              <div class="option-content">
                <h3>职场社区</h3>
                <p>分享面经，了解企业热门技术栈和面试题</p>
              </div>
              <right-circle-outlined class="arrow-icon" />
            </div>
          </div>
        </div>

        <!-- 全流程面试详情 -->
        <div v-if="currentStep === 'full-process'" class="step-detail">
          <div class="step-header">
            <button class="back-button" @click="setStep('main')">
              <arrow-left-outlined />
              返回
            </button>
            <h2 class="step-title">全流程面试</h2>
          </div>

          <div class="process-timeline">
            <a-timeline>
              <a-timeline-item color="blue">
                <template #dot><solution-outlined /></template>
                <div class="timeline-content">
                  <h3>简历筛选</h3>
                  <p>根据公司的具体岗位查看简历的分析报告和修改建议</p>
                </div>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <template #dot><number-outlined /></template>
                <div class="timeline-content">
                  <h3>在线笔试</h3>
                  <p>模拟企业真实笔试场景，包含选择题、问答题和编程题，智能评分和解析</p>
                </div>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <template #dot><code-outlined /></template>
                <div class="timeline-content">
                  <h3>技术面试</h3>
                  <p>智能模拟技术面试官，根据简历和岗位要求提出针对性问题，实时语音交互</p>
                </div>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <template #dot><user-outlined /></template>
                <div class="timeline-content">
                  <h3>HR面试</h3>
                  <p>模拟HR面试环节，考察软实力和企业文化匹配度，助您轻松应对压力面试</p>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green">
                <template #dot><file-done-outlined /></template>
                <div class="timeline-content">
                  <h3>综合评估报告</h3>
                  <p>全面分析面试表现，提供个性化改进建议，增强求职竞争力</p>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>

          <div class="action-section">
            <a-button type="primary" size="large" @click="startFullProcess">
              开始全流程面试
            </a-button>
            <p class="tip-text">体验完整的企业面试流程，提前熟悉各个环节</p>
          </div>
        </div>

        <!-- 模块化面试详情 -->
        <div v-if="currentStep === 'modular'" class="step-detail">
          <div class="step-header">
            <button class="back-button" @click="setStep('main')">
              <arrow-left-outlined />
              返回
            </button>
            <h2 class="step-title">模块化面试</h2>
          </div>

          <p class="module-intro">针对性练习各个面试环节，提升单项能力</p>

          <div class="modules-grid">
            <div class="module-card" @click="navigateTo('/resume/upload')">
              <project-outlined class="module-icon" />
              <div class="module-content">
                <h3>简历筛选模块</h3>
                <p>根据公司的具体岗位查看简历的分析报告和修改建议</p>
              </div>
            </div>

            <div class="module-card" @click="navigateTo('/written/Interview/confirm')">
              <experiment-outlined class="module-icon" />
              <div class="module-content">
                <h3>笔试模块</h3>
                <p>练习编程题、选择题和问答题，智能评分和题目解析</p>
              </div>
            </div>

            <div class="module-card" @click="navigateTo('/tec/interview/confirm')">
              <code-outlined class="module-icon" />
              <div class="module-content">
                <h3>技术面模块</h3>
                <p>模拟技术面试，针对岗位要求进行专业知识考察</p>
              </div>
            </div>

            <div class="module-card" @click="navigateTo('/hr/interview/confirm')">
              <user-outlined class="module-icon" />
              <div class="module-content">
                <h3>HR面模块</h3>
                <p>软实力考察，处理棘手问题，展现个人价值</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 职场社区详情 -->
        <div v-if="currentStep === 'community'" class="step-detail">
          <div class="step-header">
            <button class="back-button" @click="setStep('main')">
              <arrow-left-outlined />
              返回
            </button>
            <h2 class="step-title">职场社区</h2>
          </div>

          <div class="community-features">
            <div class="feature-section">
              <h3 class="feature-title"><read-outlined /> 面经分享</h3>
              <p class="feature-desc">浏览真实面经，了解企业面试流程和问题，掌握应对策略</p>
              <div class="feature-card-grid">
                <div class="feature-card">
                  <div class="feature-card-icon"><file-text-outlined /></div>
                  <div class="feature-card-content">
                    <h4>查看面经</h4>
                    <p>了解各公司真实面试体验</p>
                  </div>
                </div>
                <div class="feature-card">
                  <div class="feature-card-icon"><edit-outlined /></div>
                  <div class="feature-card-content">
                    <h4>分享经验</h4>
                    <p>分享您的面试心得与经验</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="feature-section">
              <h3 class="feature-title"><database-outlined /> 企业题库</h3>
              <p class="feature-desc">查看各企业热门技术栈和高频面试题，有针对性地准备面试</p>
              <div class="feature-card-grid">
                <div class="feature-card">
                  <div class="feature-card-icon"><bar-chart-outlined /></div>
                  <div class="feature-card-content">
                    <h4>技术趋势</h4>
                    <p>了解行业和岗位技术趋势</p>
                  </div>
                </div>
                <div class="feature-card">
                  <div class="feature-card-icon"><question-circle-outlined /></div>
                  <div class="feature-card-content">
                    <h4>热门题目</h4>
                    <p>收集企业高频面试问题</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="action-section">
            <a-button type="primary" size="large" @click="navigateTo('/community')">
              进入职场社区
            </a-button>
          </div>
        </div>
      </div>

      <!-- 底部操作区 -->
      <div class="guide-footer" v-if="currentStep === 'main'">
        <a-button type="primary" @click="closeGuide">开始使用</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  AppstoreOutlined,
  FieldTimeOutlined,
  TeamOutlined,
  RightCircleOutlined,
  ArrowLeftOutlined,
  NumberOutlined,
  CodeOutlined,
  SolutionOutlined,
  UserOutlined,
  FileDoneOutlined,
  ExperimentOutlined,
  ProjectOutlined,
  ReadOutlined,
  DatabaseOutlined,
  FileTextOutlined,
  EditOutlined,
  BarChartOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserstore'
import ACCESS_ENUM from '@/access/accessEnum'
import { setLocalCache, getLocalCache } from '@/utils/LocalStorageUtils'

//获取当前用户仓库
const userStore = useLoginUserStore()
const router = useRouter()
const visible = ref<boolean>()

//如果当前身份不为用户则不显示
const userRole = userStore.loginUser.userRole

// 本地存储key
const STORAGE_KEY = 'welcome_guide_shown'
// 查看是否已经显示过了(true-显示，false-不显示)
const hasShownGuide = getLocalCache(STORAGE_KEY)
if(hasShownGuide && userRole === ACCESS_ENUM.USER) visible.value = hasShownGuide

const currentStep = ref('main')

// 设置当前步骤
const setStep = (step: string) => {
  currentStep.value = step
}

// 关闭引导
const closeGuide = () => {
  setLocalCache(STORAGE_KEY, false)
  visible.value = false
}

// 导航到指定路由
const navigateTo = (path: string) => {
  closeGuide()
  router.push(path)
}

// 开始全流程面试
const startFullProcess = () => {
  closeGuide()
  router.push('/full/interview/confirm')
}

</script>

<style scoped>

.fade-in {
  animation: fadeIn 0.8s ease-out;
}

.fade-in-delay {
  animation: fadeIn 0.8s ease-out 0.3s both;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-guide {
  padding: 0;
  overflow: hidden;
}

.guide-header {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  padding: 30px 40px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.guide-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.logo-placeholder {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.guide-content {
  padding: 30px 40px;
  max-height: 500px;
  overflow-y: auto;
}

.section-title {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

.highlight {
  color: #1890ff;
}

.section-desc {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

.option-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #1890ff;
  transition: all 0.3s ease;
  opacity: 0;
}

.option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background: #f0f8ff;
}

.option-card:hover::before {
  opacity: 1;
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #e6f7ff;
  border-radius: 10px;
  font-size: 24px;
  color: #1890ff;
  margin-right: 16px;
  flex-shrink: 0;
}

.option-content {
  flex: 1;
}

.option-content h3 {
  font-size: 18px;
  margin: 0 0 4px 0;
  color: #222;
}

.option-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.arrow-icon {
  color: #1890ff;
  font-size: 20px;
  opacity: 0;
  transition: all 0.3s ease;
  margin-left: 8px;
}

.option-card:hover .arrow-icon {
  opacity: 1;
}

.guide-footer {
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
}

/* 步骤详情样式 */
.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.back-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  margin-right: 16px;
}

.back-button:hover {
  text-decoration: underline;
}

.step-title {
  margin: 0;
  font-size: 20px;
  color: #222;
}

.process-timeline {
  margin-bottom: 30px;
}

.timeline-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #1890ff;
}

.timeline-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.action-section {
  text-align: center;
  margin-top: 20px;
}

.tip-text {
  margin-top: 12px;
  color: #888;
  font-size: 14px;
}

/* 模块化面试样式 */
.module-intro {
  text-align: center;
  margin-bottom: 24px;
  color: #666;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.module-card {
  padding: 24px;
  background: #f9f9f9;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background: #f0f8ff;
}

.module-icon {
  font-size: 32px;
  color: #1890ff;
  margin-bottom: 16px;
}

.module-content h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #222;
}

.module-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 社区功能样式 */
.community-features {
  margin-bottom: 30px;
}

.feature-section {
  margin-bottom: 24px;
}

.feature-title {
  font-size: 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1890ff;
}

.feature-desc {
  margin-bottom: 16px;
  color: #666;
}

.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.feature-card {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
}

.feature-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  font-size: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.feature-card-content h4 {
  font-size: 15px;
  margin: 0 0 4px 0;
  color: #222;
}

.feature-card-content p {
  margin: 0;
  color: #666;
  font-size: 13px;
}

/* 响应式调整 */
@media (max-width: 767px) {
  .modules-grid,
  .feature-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 滚动条样式 */
.guide-content::-webkit-scrollbar {
  width: 6px;
}

.guide-content::-webkit-scrollbar-track {
  background: transparent;
}

.guide-content::-webkit-scrollbar-thumb {
  background-color: rgba(24, 144, 255, 0.2);
  border-radius: 10px;
}

.guide-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(24, 144, 255, 0.4);
}

.main-options {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-detail {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
